<template>
	<view class="car" style="    width: 100%;">
		<view class="car-wrapper">
			<!-- <view class="car-bg"> -->
			<image src='../../../static/images/lvye.png' style="height: 198px;width: 100%;" v-if="level===0"></image>
			<image src='../../../static/images/lvye.png' style="height: 198px;width: 100%;" v-if="level===3"></image>
			
			<image src='../../../static/images/fengye.png' style="height: 198px;width: 100%;" v-if="level===1"></image>
			<image src='../../../static/images/fengye.png' style="height: 198px;width: 100%;" v-if="level===2"></image>
			<view style="padding: 34px 18px 0 18px; height: 201px;position: absolute;top:0;width: 100%;">
				<view style="padding: 22px 22px;">
					<view class="car-user">
						<image :src="avatar"></image>
						<view class="car-name">{{userInfo.nickname}}</view>
					</view>
					<view v-if="level===1">
						<view class="car-main" style="color: #8A6C37;">开通枫叶卡即享会员专属权益</view>
					</view>
					
					<view v-if="level===2">
						<view class="car-main" style="color: #8A6C37;">您已成为枫叶卡会员，可享专属权益</view>
					</view>
					
					<view v-if="level===0">
						<view class="car-main">开通绿叶卡即享会员专属权益</view>
					</view>
					
					<view v-if="level===3">
						<view class="car-main">您已成为绿叶卡会员，可享专属权益</view>
					</view>

				</view>
				
				<view class="car-time" v-if="level===1" style="color: #8A6C37;border-top: 1px solid #8A6C37;">有效期为自购买日起计算一年有效期</view>
				<view class="car-time" v-if="level===2" style="color: #8A6C37;border-top: 1px solid #8A6C37;">到期日：{{userInfo.level_date}}</view>
				
				<view class="car-time" v-if="level===0">有效期为自购买日起计算一年有效期</view>
				<view class="car-time" v-if="level===3">到期日：{{userInfo.level_date}}</view>
			</view>
			<!-- </view> -->
		</view>
		<view style="background-color: #fff;padding-top: 50px;margin-top: -38px;">
			<view class="fit-wrapper">
				<view class="fit-left" v-if="level===1||level===2" style="background:linear-gradient(90deg,rgba(235,215,175,0.1) 0%,rgba(197,163,103,1) 100%);"></view>
				<view class="fit-left" v-if="level===0||level===3"></view>
				<view class="fit-title">三大权益</view>
				<view class="fit-right" v-if="level===1||level===2" style="background:linear-gradient(90deg,rgba(235,215,175,1) 0%,rgba(197,163,103,0.1) 100%);"></view>
				<view class="fit-right" v-if="level===0||level===3"></view>
			</view>
			<view class="fit-list">
				<view class="fit-item">
					<image src='../../../static/images/lv1.png' v-if="level===3"></image>
					<image src='../../../static/images/lv1.png' v-if="level===0"></image>
					
					<image src='../../../static/images/fen1.png' v-if="level===2"></image>
					<image src='../../../static/images/fen1.png' v-if="level===1"></image>
					<view class="item-text">
						<view style="font-size: 15px;color: #30362A;">专属标识</view>
						<view style="font-size: 12px;color: #969993;">可以得到专属会员标识</view>
					</view>
				</view>
				<view class="fit-item">
					<image src='../../../static/images/lv2.png'  v-if="level===3"></image>
					<image src='../../../static/images/lv2.png' v-if="level===0"></image>
					
					<image src='../../../static/images/fen2.png' v-if="level===2"></image>
					<image src='../../../static/images/fen2.png' v-if="level===1"></image>
					
					<view class="item-text">
						<view style="font-size: 15px;color: #30362A;">专享优惠</view>
						<view style="font-size: 12px;color: #969993;">参加活动可以获得专享优惠</view>
					</view>
				</view>
				<view class="fit-item">
					<image src='../../../static/images/lv3.png'  v-if="level===3"></image>
					<image src='../../../static/images/lv3.png' v-if="level===0"></image>
					
					<image src='../../../static/images/fen3.png' v-if="level===2"></image>
					<image src='../../../static/images/fen3.png' v-if="level===1"></image>
					<view class="item-text">
						<view style="font-size: 15px;color: #30362A;">参加活动</view>
						<view style="font-size: 12px;color: #969993;">参加会员活动</view>
					</view>
				</view>
			</view>
		</view>
		<view style="margin: 10px 20px;color: #999999;font-size: 13px;padding-bottom: 200upx;" v-if="level===3||level===2">
			审核成功后系统将在1~2个工作日内把押金返回至
			您的账户；<br />
			如有疑问请<text style="color: #333333" @click="hanldkefubut()">联系客服</text>
		</view>

		

		<!--会员-->
		<view class="fit-but-wrapper" v-if="level===0">
			<view class="fit-but" @click="hanldPaly()">
				<text>{{level_maple}}元/年 立即开通会员卡</text>
			</view>
		</view>
		
		<!--绿叶-->
		<view class="fit-but-wrapper" v-if="level===3">
			<view class="fit-but" @click="hanldPaly()">
				<text>立即续费</text>
			</view>
		</view>
		
		<!--业主-->
		<view class="fit-but-wrapper" v-if="level===1">
			<view class="fit-but" @click="hanldPaly()">
				<text>{{level_green}}元/年 立即开通会员卡</text>
			</view>
		</view>
		
		<!--枫叶-->
		<view class="fit-but-wrapper" v-if="level===2">
			<view class="fit-but" @click="hanldPaly()">
				<text>立即续费</text>
			</view>
		</view>

		<!--退卡弹框-->
		<!-- <uni-popup ref="popupDialog" type="dialog" @change="change">
			<uni-popup-dialog :type="msgType" title="通知" content="欢迎使用 uni-popup!" :before-close="true" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup> -->

		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog title="提示" content="您是否确定退卡？" :before-close="true" @confirm="confirm" @close="close"></uni-popup-dialog>
		</uni-popup>
		
		<!--客服弹框-->
			<uni-popup ref="popupkf" type="center">
				<view class="qian">
					<image :src='kefu.kefu_avatar' class="qian-img" style="    width: 67px;
		height: 67px;
		border-radius: 50%;
		margin-top: -40px;"></image>
					<view class="kf-title">官方客服-{{kefu.kefu_nickname}}</view>
					<view class="kf-main">这是您的专属客服</view>
					<image :src='kefu.kefu_qrcode' class="kf-img"></image>
					<view class="kf-text">长按二维码或截图保存图片</view>
					<view class="kf-but" @click="downloadImageOfMp(kefu.kefu_qrcode)">下载二维码</view>
				</view>
			</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		data() {
			return {
				userInfo: "",
				level: Number,
				avatar: "",
				level_green: "", //枫叶
				level_maple: "", //绿叶
				xuf: "",
				kefu:""
			}
		},
		components: {
			uniPopup,
			uniPopupMessage,
			uniPopupDialog
		},
		onShow() {
			this.initData();
			this.getConfig();
			this.hanldKefu()
		},
		onLoad(options) {
			if (options.xuf) {
				this.xuf = options.xuf;
				console.log("xufei" + this.xuf)
			}
		},
		methods: {
			open() {
				this.$refs.popup.open()
			},
			close(done) {
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 done 才会关闭对话框
				done()
			},
			/*
			 * 点击确认按钮触发
			 */
			confirm(done, value) {

				// 	uni.showToast({
				// 	    title: '退卡成功',
				// 	    duration: 1000,
				// 		  icon:'none',
				// 	});
				setTimeout(function() {
					uni.navigateTo({
						url: '../returnTheCard/returnTheCard'
					});
				}, 1000);


				done()
			},
			//获取用户信息
			initData() {

				this.$http.get('/user/info').then((response) => {

					const res = response.data;
					if (res.code == 0) {
						this.userInfo = res.data;
						this.level = res.data.level;
						this.avatar = this.userInfo.avatar;
					}
				})
			},
			getConfig() {
				this.$http.get('/index/config').then((response) => {
					const res = response.data;
					if (res.code == 0) {
						this.level_green = res.data.level_maple; //枫
						this.level_maple = res.data.level_green;  //绿
					}
				})
			},
			//微信支付
			hanldPaly() {
				uni.showLoading({
				    title: '加载中'
				});
				let that = this;
					const formData = {
					  type: 2
					}
					this.$http.post('/wechat/wxPay', formData).then((response) => {
						const res = response.data;
						if(res.code==0){
							wx.requestPayment({
							  timeStamp: res.data.timeStamp,
							  nonceStr: res.data.nonceStr,
							  package: res.data.package,
							  signType: "MD5",
							  paySign: res.data.paySign,
							  success(res) {
								uni.showToast({title: res.msg, icon: 'none'});
							    console.log(res + "支付接口");
							  },
							  fail(res) {
							   uni.showToast({title: res.msg, icon: 'none'});
							  }
							});
						}
						uni.showToast({title: res.msg, icon: 'none'});
						uni.hideLoading();
					})
				},
				//客服
				hanldKefu() {
				
					this.$http.get('/user/kefu').then((response) => {
						const res = response.data;
						if (res.code == 0) {
							this.kefu = res.data;
							console.log(this.kefu)
							console.log("this.kefu")
						}
					})
				},
				//客服
				hanldkefubut() {
					this.$refs.popupkf.open()
				},
				downloadImageOfMp(image) {
					let _this = this
				
					uni.downloadFile({
						url: image,
						success(res) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success() {
									uni.showToast({
										title: '保存成功',
										icon: 'none'
									});
								},
								fail() {
									uni.showToast({
										title: '保存失败',
										icon: 'none'
									});
								}
							});
						},
						fail() {
							_this.$common.errorToShow('下载失败')
						}
					})
				}
		}
	}
</script>

<style scoped>
	.car {
		background-color: #F9F9F9;
	}

	.car-wrapper {
		position: relative;
	}

	.car-user {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.car-user image {
		width: 36px;
		height: 36px;
		border-radius: 50%;
	}

	.car-bg {
		display: flex;
		flex-direction: column;
		height: 198px;
		width: 100%;
		background-repeat: no-repeat;
		position: relative;
		/* top: 26px; */
		/* margin: 0px 17px 0 17px; */
		/* border-radius: 10px; */
		background-position: center;
		background-size: 100% 100%;
	}

	.car-name {
		color: #1E4335;
		font-size: 16px;
		margin-left: 10px;
	}

	.car-main {
		color: #378A45;
		margin-top: 6px;
	}

	.car-time {
		color: #378A45;
		width: 100%;
		height: 35px;
		margin-top: 15px;
		line-height: 35px;
		padding-left: 26px;
		border-top: 1px solid #72CC9E;
	}

	.fit-title {
		color: #30362A;
		font-size: 14px;
		font-weight: bold;
		text-align: center;
		padding: 0 8px;
	}

	.fit-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.fit-left {
		width: 24px;
		height: 3px;
		background: linear-gradient(90deg, rgba(103, 197, 120, 0.1) 0%, rgba(103, 197, 120, 1) 100%);
	}

	.fit-right {
		width: 24px;
		height: 3px;
		background: linear-gradient(90deg, rgba(103, 197, 120, 1) 0%, rgba(103, 197, 120, 0.1) 100%);
	}

	.fit-list {
		display: flex;
		flex-direction: column;
		padding-bottom: 15px;
	}

	.fit-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 10px 18px;
	}

	.fit-item image {
		width: 33px;
		height: 33px;
	}

	.fit-text {
		display: flex;
		flex-direction: column;
	}

	.item-text {
		margin-left: 12px;
	}

	.fit-but-wrapper {
		position: fixed;
		bottom: 0px;
		background-color: #fff;
		height: 81px;
		width: 100%;
	}

	.fit-but {
		font-size: 16px;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		line-height: 22px;
		height: 44px;
		background: rgba(255, 95, 73, 1);
		border-radius: 20px;
		text-align: center;
		line-height: 44px;
		margin: 5px 17px;
	}
	
	/**/
	
	.qian {
		height: 419px;
		width: 640upx;
		background-color: #fff;
		border-radius: 10px;
		text-align: center;
		padding: 0 8px;
		position: relative;
	}
	
	
	.qian-img {
		width: 206px;
		height: 144px;
		margin-top: -200upx;
	}
	
	.kf-title {
		color: #14172C;
		font-size: 17px;
		font-weight: bold;
	}
	
	.kf-main {
		color: #A4A5B0;
		font-size: 14px;
		padding: 0px 0 10px 0;
	}
	
	.kf-img {
		width: 200px;
		height: 200px;
	}
	
	.kf-text {
		color: #A4A5B0;
		font-size: 14px;
		padding: 0px 0 10px 0;
	}
	
	.kf-but {
		margin: 0 20px;
		height: 44px;
		background: rgba(255, 95, 73, 1);
		border-radius: 3px;
		text-align: center;
		line-height: 44px;
		color: #FFFFFF;
		font-size: 16px;
	}
	
</style>
